<template>
  <div class="device">
    <h2 style="margin-top: 20px">设备信息维护</h2>
    <el-card shadow="hover" style="margin-top: 20px; margin-left: 5%; width: 90%">
      <el-table
          :data="tableData.filter(data => !search || data.facility.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%" stripe>
        <el-table-column
            label="设备更新时间"
            prop="last_update_time"
            width=300>
        </el-table-column>
        <el-table-column
            label="设备"
            prop="facility" width="400">
        </el-table-column>
        <el-table-column label="状态" prop="state" width="100"></el-table-column>
        <el-table-column
            align="right">
          <template slot="header" slot-scope="scope">
            <el-input
                v-model="search"
                placeholder="输入关键字搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button
                @click="handleCheck(scope.$index, scope.row)">查看</el-button>

          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>


<script>
import {request} from "../network/2";

export default {
  methods: {
    handleCheck(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    async getRes(){
      let res = await request("/aa")
      this.tableData = res.data
    },
  },
  created() {
    this.getRes()
  },
  data() {
    return {
      // tableData: [{
      //   last_update_date: '2021-12-02 12:23:34',
      //   facility: '高压辊磨电机2#',
      //   state: '良好'
      // }, {
      //   last_update_date: '2021-12-02 15:11:34',
      //   facility: '辊磨2号变频器控制柜(活动辊高压)',
      //   state: '良好'
      // }, {
      //   last_update_date: '2021-12-02 15:11:34',
      //   facility: '高压辊磨开度阀电机2#',
      //   state: '良好'
      // },
      // ],
      tableData:[],
      search: ''
    }
  },

}
</script>